<template>
  <el-table
    :data="
      tableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)
    "
    style="width: 100%"
  >
    <el-table-column prop="id" label="编号" width="180" />
    <el-table-column prop="title" label="楼盘名称" width="180" />
    <el-table-column prop="type" label="房源类型" width="180" />
    <el-table-column prop="num" label="门牌号" width="180" />
    <el-table-column prop="hometype" label="房源户型" width="180" />
    <el-table-column prop="name" label="户主" />
    <el-table-column align="right">
      <template #header>
        <el-input
          v-model="search"
          size="small"
          placeholder="搜索户主名字"
          @input="searchdata"
        />
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    v-model:currentPage="currentPage4"
    v-model:page-size="pageSize4"
    :page-sizes="[10, 15, 30, 50, 100]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="tableData.length"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import apiUrl from "../../api/urls";
import link from "../../api/link";
interface User {
  id: number;
  title: string;
  type: string;
  num: string;
  hometype: string;
  name: string;
}
//搜索关键字
const search = ref<string>();
//大数据，用来储存
const dashuju = ref<User[]>([]);
//用来渲染
const tableData = ref<User[]>([]);
const currentPage4 = ref(1);
const pageSize4 = ref(15);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

(async () => {
  link(apiUrl.userlist).then((res: any) => {
    // console.log(res);
    tableData.value = res.data;
    dashuju.value = res.data;
  });
})();
//搜索
const searchdata = () => {

  let searchData = dashuju.value.filter((item: any) =>
    item.name.includes(search.value)
  );
  tableData.value = searchData ? searchData : tableData.value;
};

//在哪一页
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`);
  pageSize4.value = val;
};
//每页的数据数量
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`);
  currentPage4.value = val;
};
</script>

<style lang="scss">
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>